<template>
  <div :class="['hquery']">
    <a-row :gutter="[20, 12]">
      <a-col :span="item.type == 'dateTime' ? 6 : 6" v-for="item in queryListFilter" :key="item.key instanceof Array ? item.key.join(',') : item.key">
        <h-query-item :label="item.label" v-if="item.type == 'input'">
          <a-input v-model="queryParams[item.key]" allowClear :placeholder="item.placeholder || item.label"></a-input>
        </h-query-item>
        <h-query-item :label="item.label" v-else-if="item.type == 'dateTime'">
          <a-range-picker
            :show-time="showTime"
            style="width: 100%"
            v-model="defaultValueRangValue"
            :format="format"
            :placeholder="['开始时间', '结束时间']"
            @change="(s, t) => onChange(s, t, item)"
            @ok="search"
          />
        </h-query-item>
        <h-query-item :label="item.label" v-else-if="item.type == 'dateTime2'">
          <a-range-picker
            style="width: 100%"
            v-model="defaultValueRangValue"
            :placeholder="['开始时间', '结束时间']"
            @change="(s, t) => onChange(s, t, item)"
            @ok="search"
          />
        </h-query-item>
        <h-query-item :label="item.label" v-else-if="item.type == 'date'">
          <a-date-picker
            :show-time="showTime"
            :format="format || 'YYYY-MM-DD'"
            style="width: 100%"
            placeholder="选择时间"
            v-model="defaultValueDate.value"
            @change="(s) => onChangeDate(s, item)"
            @ok="search"
          />
        </h-query-item>
        <h-query-item :label="item.label" v-else-if="item.type == 'dateM'">
          <a-month-picker
            :show-time="showTime"
            format='YYYY-MM'
            style="width: 100%"
            placeholder="选择时间"
            v-model="defaultValueDate.value"
            @change="(s) => onChangeDate(s, item)"
            @ok="search"
          />
        </h-query-item>
        <h-query-item :label="item.label" v-else-if="item.type == 'select'">
          <a-select style="width: 100%" allowClear v-model="queryParams[item.key]" :placeholder="item.placeholder || item.label">
            <a-select-option v-for="el in item.options" :key="el.value" :value="el.value">{{ el.label }}</a-select-option>
          </a-select>
        </h-query-item>
      </a-col>
      <slot name="custom"></slot>
      <a-button v-if="!hideBtn" type="primary" style="margin: 6px 0 0 0" @click="search">筛选</a-button>
      <slot name="btn"></slot>
    </a-row>
    <slot></slot>
  </div>
</template>
<script>
import HQueryItem from './HQueryItem';
import moment from 'moment';

export default {
  name: 'HQuery',
  components: { HQueryItem },
  props: {
    showKey: {
      type: Array,
      default: () => ['title', 'startTime,endTime']
    },
    query: {
      type: Array,
      default: () => []
    },
    hideBtn: {
      default: false
    },
    showTime: {
      type: [Object, Boolean],
      default: () => {
        return { format: 'HH:mm' };
      }
    },
    defaultValueRang: {
      type: Array,
      default: () => []
    },
    defaultValueDate: {
      type: Object,
      default: () => {
        return {
          value: ''
        };
      }
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss'
    }
  },
  data() {
    return {
      queryList: [
        {
          key: 'title',
          type: 'input',
          label: '关键词'
        },
        {
          key: ['startTime', 'endTime'],
          type: 'dateTime',
          label: '时间'
        }
      ],
      queryParams: {},
      queryListFilter: [],
      defaultValueRangValue: null
    };
  },
  watch: {
    defaultValueRang: {
      handler(val) {
        console.log(val);
        if (val) this.defaultValueRangValue = val;
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const queryListFilter = this.queryList.filter(e => this.showKey.includes(e.key instanceof Array ? e.key.join(',') : e.key));
    this.queryListFilter = queryListFilter.concat(this.query);
  },
  methods: {
    updateQuery(key, value) {
      this.$set(this.queryParams, key, value);
    },
    clear(query) {
      this.queryParams = {};
    },
    onChange(e, time, { key }) {
      console.log(time);
      console.log(key);
      this.$set(this.queryParams, key[0], time[0]);
      this.$set(this.queryParams, key[1], time[1]);
      if (!this.showTime) this.$emit('search', this.queryParams);
    },
    onChange2(e, time, { key }) {
      // console.log(time);
      this.$set(this.queryParams, key[0], time[0]);
      this.$set(this.queryParams, key[1], time[1]);
      if (!this.showTime) this.$emit('search', this.queryParams);
    },
    onChangeDate(time, { key }) {
      if (time) {
        this.$set(this.queryParams, key, moment(time).format(this.format));
      } else {
        this.$set(this.queryParams, key, '');
      }
    },
    search() {
      this.$emit('search', { ...this.queryParams, pageNo: 1 });
    }
  }
};
</script>
<style lang="less">
.hquery {
  margin-left: -10px;
  position: relative;
  margin-bottom: 36px;
}
</style>
